<script>
import ReportItem from '~/ci/reports/components/report_item.vue';
import { STATUS_FAILED, STATUS_NEUTRAL, STATUS_SUCCESS } from '~/ci/reports/constants';
import SmartVirtualList from '~/vue_shared/components/smart_virtual_list.vue';

const wrapIssueWithState =
  (status, isNew = false) =>
  (issue) => ({
    status: issue.status || status,
    isNew,
    issue,
  });

/**
 * Renders block of issues
 */
export default {
  components: {
    SmartVirtualList,
    ReportItem,
  },
  /*
   The maximum amount of shown issues.
   We will use VirtualList if we have more items than this number.
   For entries lower than this number, the virtual scroll list calculates the total height of the element wrongly.
   */
  maxShownReportItems: 20,
  props: {
    newIssues: {
      type: Array,
      required: false,
      default: () => [],
    },
    unresolvedIssues: {
      type: Array,
      required: false,
      default: () => [],
    },
    resolvedIssues: {
      type: Array,
      required: false,
      default: () => [],
    },
    neutralIssues: {
      type: Array,
      required: false,
      default: () => [],
    },
    component: {
      type: String,
      required: false,
      default: '',
    },
    showReportSectionStatusIcon: {
      type: Boolean,
      required: false,
      default: true,
    },
    issuesUlElementClass: {
      type: String,
      required: false,
      default: '',
    },
    issueItemClass: {
      type: String,
      required: false,
      default: null,
    },
    nestedLevel: {
      type: Number,
      required: false,
      default: 0,
      validator: (value) => [0, 1, 2].includes(value),
    },
  },
  computed: {
    issuesWithState() {
      return [
        ...this.newIssues.map(wrapIssueWithState(STATUS_FAILED, true)),
        ...this.unresolvedIssues.map(wrapIssueWithState(STATUS_FAILED)),
        ...this.neutralIssues.map(wrapIssueWithState(STATUS_NEUTRAL)),
        ...this.resolvedIssues.map(wrapIssueWithState(STATUS_SUCCESS)),
      ];
    },
    wclass() {
      return `report-block-list ${this.issuesUlElementClass}`;
    },
    listClasses() {
      return {
        'gl-pl-9': this.nestedLevel === 1,
        'gl-pl-11-5': this.nestedLevel === 2,
      };
    },
  },
};
</script>
<template>
  <smart-virtual-list
    :length="issuesWithState.length"
    :remain="$options.maxShownReportItems"
    class="report-block-container"
    :class="listClasses"
    wtag="ul"
    :wclass="wclass"
  >
    <report-item
      v-for="(wrapped, index) in issuesWithState"
      :key="index"
      :issue="wrapped.issue"
      :status="wrapped.status"
      :component="component"
      :is-new="wrapped.isNew"
      :show-report-section-status-icon="showReportSectionStatusIcon"
      :class="issueItemClass"
    />
  </smart-virtual-list>
</template>
